<template>
  <a-layout style="height: 100%">
    <a-layout-sider v-model:collapsed="collapsed">
      <div class="logo"></div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item v-for="item in menuItems" :key="item.key">
          <user-outlined />
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content>
      <div style="padding: 30px; height: 100%">
        <a-card title="管理员" style="height: 100%"></a-card>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { UserOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

const collapsed = ref(false);
const selectedKeys = ref(["1"]);
const menuItems = ref([
  {
    key: "1",
    name: "管理员",
  },
  {
    key: "2",
    name: "用户",
  },
  {
    key: "3",
    name: "律所",
  },
]);
</script>

<style scoped>
</style>